<template>
  <div class="all">
    <div id="top">
      <div class="title">
        <!-- <img src="../../assets/home/title.png" @click="handleLogoClick" /> -->
        <img src="../../assets/home/logoIcon.png" @click="handleLogoClick" />
        <span @click="handleLogoClick"> xxxx大学就业创业职业大全云平台 </span>
      </div>
    </div>
    <div id="app-container">
      <searchBox ref="searchBox" :hideHistory="true" :clickInputOutside="clickInputOutside"
        @getInputData="getInputData"></searchBox>
      <div class="main">
        <div class="topNavi">
          <div class="topNaviItem">
            <div class="backBtn" @click="handleBackBtnClick">
              <img :src="backBtn" alt="" />
            </div>
            <div class="naviPositionName">{{ positionName }}</div>
            <div class="fatherTitleName">{{ positionFatherName }}</div>
            <div class="collect" :class="collectStatus ? 'collected' : ''" @click="clickCollect">
              <img src="../../assets/home/whiteCollect.png" />
              <p>{{ collectStatus ? "已关注" : "关注" }}</p>
            </div>
          </div>
          <div class="topNaviItemRight" v-if="!isSuperToken">
            <button class="switchBtn" @click="changeEditStatus()" v-if="isAdmin == true && currentTab == '1-1'">
              {{ editAll ? "退出编辑全部" : "编辑全部" }}
            </button>
            <button class="switchBtn disabledSave" v-if="
                isAdmin == true &&
                currentTab == '1-1' &&
                editAll == false &&
                openAtLeastOneEdit == true
              " @click="saveAll()">
              保存全部
            </button>
            <button class="saveAllBtn" style="width: 80px" @click="saveAll()"
              v-if="isAdmin == true && editAll == true && currentTab == '1-1'">
              保存全部
            </button>
          </div>
          <!-- <div class="parentName">{{parentName}}</div> -->
        </div>
        <div class="mainContent">
          <div class="menu">
            <el-menu default-active="1-1" :default-openeds="openeds" @select="handleSelect" @open="handleOpen"
              @close="handleClose" :collapse="false">
              <el-submenu index="1">
                <template slot="title">
                  <span>
                    <img class="menuIcon" :src="
                        currentFatherTab == '1'
                          ? menuIconList[1]
                          : menuIconList[0]
                      " />职业概述</span>
                </template>
                <el-menu-item index="1-1">职业概述</el-menu-item>
              </el-submenu>
              <el-submenu index="5" v-if="specialHidden">
                <template slot="title">
                  <span>
                    <img class="menuIcon" :src="
                        currentFatherTab == '5'
                          ? menuIconList[7]
                          : menuIconList[6]
                      " />招聘配置</span>
                </template>
                <el-menu-item index="5-1">招聘需求变化</el-menu-item>
                <el-menu-item index="5-2">热门招聘城市</el-menu-item>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <span>
                    <img class="menuIcon" :src="
                        currentFatherTab == '3'
                          ? menuIconList[3]
                          : menuIconList[2]
                      " />薪酬激励</span>
                </template>
                <el-menu-item index="3-1">地区薪酬</el-menu-item>
                <el-menu-item index="3-2">工作经验薪酬</el-menu-item>
                <el-menu-item index="3-3">学历薪酬</el-menu-item>
                <el-menu-item index="3-4" v-if="specialHidden">求职者期望薪酬</el-menu-item>
                <el-menu-item index="3-5" v-if="specialHidden">相似岗位薪酬</el-menu-item>
                <el-menu-item index="3-6">平均薪酬</el-menu-item>
              </el-submenu>
              <el-submenu index="4" v-if="specialHidden">
                <template slot="title">
                  <span>
                    <img class="menuIcon" :src="
                        currentFatherTab == '4'
                          ? menuIconList[5]
                          : menuIconList[4]
                      " />培训开发</span>
                </template>
                <el-menu-item index="4-1">发展前景</el-menu-item>
              </el-submenu>
              <!-- <el-submenu index="2">
                <template slot="title">
                  <span> <i class="el-icon-user-solid"></i>人才招聘</span>
                </template>
                <el-menu-item-group>
                </el-menu-item-group>
              </el-submenu> -->
            </el-menu>
          </div>
          <div id="content">
            <!--职业概述-->
            <div class="positionDesc" v-if="currentTab == '1-1'">
              <div class="scrollToTop" v-if="scrollToTopBtn" @click="scrollTopTopClick()">
                <!-- <i class="el-icon-top"></i> -->
                <!-- <div class="small">置顶</div> -->
                <div class="top-icon"></div>
                <div class="small">TOP</div>
              </div>
              <websocket ref="child" @initMessageBack="initMessageBack" />
              <div id="list">
                <el-row class="demo-autocomplete" v-for="(item, index) in this.info" :key="index">
                  <div class="controlLine" :id="'scroll' + index">
                    <span class="tinyTitle">
                      <div class="titleFlag"></div>
                      {{ item.columnName }}
                    </span>
                    <div class="line"></div>
                    <div class="saveBtns" v-if="!isSuperToken">
                      <div class="contentItemEditAndAIBtn AIBtn" @click="
                          aiCreate(
                            item.questionContent,
                            item.columnIndex,
                            item.columnName
                          )
                        ">
                        <img src="../../assets/detail/AI.png" />
                        {{ aiCreateStatus ? "AI正在生成中 . . ." : "AI生成" }}
                      </div>
                      <div class="contentItemEditAndAIBtn" @click="editCurrent(item, index)">
                        <img src="../../assets/detail/edit.png" />
                        {{ item.currentEdit ? "退出编辑" : "编辑" }}
                      </div>
                      <div class="contentItemEditAndAIBtn" @click="
                          save(item.columnCode, item.columnIndex, item.table)
                        " v-if="isAdmin == true && item.currentEdit && editAll">
                        <img src="../../assets/detail/save.png" />
                        保存
                      </div>
                      <button class="rightBtn saveAllBtn" @click="
                          save(item.columnCode, item.columnIndex, item.table)
                        " v-if="isAdmin && !editAll && item.currentEdit">
                        保存
                      </button>
                    </div>
                  </div>
                  <div class="editBox" v-if="!item.currentEdit">
                    <div v-if="item.content != ''" v-html="item.content" class="aiContent"></div>
                    <div v-if="item.extendContent.length > 0" class="editBoxRight noEdit">
                      <div class="extendsItem" v-for="(item_item, item_index) in item.extendContent" v-html="item_item"
                        :key="item_index"></div>
                    </div>
                  </div>
                  <div class="editBox" v-if="item.currentEdit && item.extendContent.length == 0">
                    <div class="editBoxLeft">
                      <el-input v-model="item.allContent" type="textarea" autosize :rows="10" placeholder="请输入内容"
                        clearable resize="none" key="noExtend" />
                      <div class="deleteContent" @click="deleteContent(index)">
                        <i class="el-icon-close"></i>
                      </div>
                    </div>
                  </div>
                  <div class="editBox" v-if="item.currentEdit && item.extendContent.length > 0">
                    <div class="editBoxLeft">
                      <el-input v-model="item.allContent" type="textarea" autosize :rows="10" placeholder="请输入内容"
                        clearable resize="none" key="extend" />
                      <div class="deleteContent" @click="deleteContent(index)">
                        <i class="el-icon-close"></i>
                      </div>
                    </div>
                    <div class="editBoxRight">
                      <div v-for="(item_item, item_index) in item.extendContent" class="extendsItem">
                        <div v-html="item_item"></div>
                        <div class="replaceByOne" @click="replaceByOne(item_item, index)">
                          一键替换
                        </div>
                      </div>
                    </div>
                  </div>

                  <div height="1000px"></div>
                </el-row>
              </div>
              <el-col class="scroller">
                <div class="wrap">
                  <div class="rightNavi">
                    <div class="navDot"></div>
                    <div class="rightNaviContainer">
                      <div class="scrollerFlex" v-for="(item, index) in this.info" :key="index">
                        <div :class="{
                            title: true,
                            online: item.isUse == 2,
                            selectedNav: selectedNav == index,
                            editedNav: item.currentEdit && selectedNav != index,
                          }" @click="handleNavClick(item, index)">
                          {{ item.columnName }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="editStatistics">
                    <div class="historyTitle">历史编辑统计</div>
                    <div class="aditContent">
                      <div class="grey">编辑次数</div>
                      <div class="editContentText">
                        {{ editData.editNum }}次历史版本
                      </div>
                    </div>
                    <div class="aditContent">
                      <div class="grey">浏览次数</div>
                      <div class="editContentText">
                        {{ editData.viewNum }}次
                      </div>
                    </div>
                    <div class="aditContent">
                      <div class="grey">最近更新</div>
                      <div class="editContentText">
                        {{ editData.editPerson
                        }}{{
                          editData.editTime ? `(${editData.editTime})` : ""
                        }}
                      </div>
                    </div>
                    <div class="aditContent">
                      <div class="grey">
                        突出贡献
                        <img class="huizhang" src="../../icons/huizhang.png" />
                      </div>
                      <div class="editContentText" v-for="(item, index) in editData.contributePersonList" :key="index">
                        {{ item }}
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </div>
            <!--        地区薪酬列表-->
            <region-salary v-if="currentTab == '3-1'" />

            <!--        工作经验/薪酬列表-->
            <work-salary v-if="currentTab == '3-2'" />
            <!--       学历薪酬-->
            <education-salary v-if="currentTab == '3-3'" />
            <!--        求职者期望薪酬-->
            <expect-salary v-if="currentTab == '3-4'" />
            <average-salary v-if="currentTab == '3-6'" />
            <!--        发展前景-->
            <promotion-salary v-if="currentTab == '4-1'" />
            <SimilarPositionSalary v-if="currentTab == '3-5'" />
            <recruitNeedChanges v-if="currentTab == '5-1'" />
            <hotCity v-if="currentTab == '5-2'" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getQuestionList,
  saveInfo,
  saveAnswerInfo,
  historyStat,
  batchSaveAnswer,
  getProfessionTreeByTitle,
  addPositionCollect,
  delPositionCollect,
  judgeCollectStatus,
} from "@/api/position-detail";
import { operateSave } from "@/api/data";
import { addLog } from "@/api/position";
import Websocket from "@/components/Websocket";
import RegionSalary from "@/views/position/region_salary";
import WorkSalary from "@/views/position/work_salary";
import EducationSalary from "@/views/position/education_salary";
import ExpectSalary from "@/views/position/expect_salary";
import PromotionSalary from "@/views/position/promotion_salary";
import SimilarPositionSalary from "@/views/position/similar_position_salary";
import recruitNeedChanges from "@/views/position/recruit_need_changes";
import hotCity from "@/views/position/hot_city";
import averageSalary from "@/views/position/average_salary";
import VueCookies from "vue-cookies";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import searchBox from "../home/components/searchBox";

export default {
  name: "Detail",
  components: {
    PromotionSalary,
    ExpectSalary,
    EducationSalary,
    WorkSalary,
    RegionSalary,
    Websocket,
    Editor,
    Toolbar,
    SimilarPositionSalary,
    averageSalary,
    recruitNeedChanges,
    hotCity,
    searchBox,
  },
  data() {
    return {
      clickInputOutside: false,
      collectStatus: null,
      inputData: "",
      specialHidden: true,
      positionFatherName: "",
      menuIconList: [
        require("../../assets/detail/menuIcon/train@2x.png"),
        require("../../assets/detail/menuIcon/trainSelected@2x.png"),
        require("../../assets/detail/menuIcon/sal@2x.png"),
        require("../../assets/detail/menuIcon/salSelected@2x.png"),
        require("../../assets/detail/menuIcon/recruit@2x.png"),
        require("../../assets/detail/menuIcon/recruitSelected@2x.png"),
        require("../../assets/detail/menuIcon/position@2x.png"),
        require("../../assets/detail/menuIcon/positionSelected@2x.png"),
      ],
      editData: {
        editNum: "0",
        editPerson: "",
        editTime: "",
        contributePersonList: [],
      },
      selectedNav: "",
      infoName: {
        def: { name: "岗位定义", order: 0 },
        task: { name: "工作内容", order: 1 },
        skill: { name: "推荐技能", order: 2 },
        book: { name: "推荐书籍", order: 3 },
        tool: { name: "推荐工具", order: 4 },
      },
      backBtn: require("../../icons/backBtn.png"),
      info: [],
      // selfInfo: [],
      currentPositionName: "",
      positionName: "",
      positionId: 0,
      currentButton: null,
      chatKey: "",
      loading: false,
      isContinue: false,
      aiCreateStatus: false,
      isStoped: false,
      // rebotBg: true,
      messageList: [],
      messages: [],
      // showError: false,
      // historyChatKey: "",
      // isShowMore: false,
      // currentMsg: "",
      currentRole: "",
      // userId: "",
      // userName: "",
      currentTab: "1-1",
      currentFatherTab: "1",
      openeds: ["1", "2", "3", "4", "5"],
      isAdmin: true,
      // editor: null,
      // toolbarConfig: {},
      // editorConfig: {
      //   placeholder: "请输入内容...",
      //   scroll: true,
      // },
      // mode: "simple", // or 'simple'
      isClickScroll: false,
      editAll: false,
      scrollToTopBtn: false,
      openAtLeastOneEdit: false,
      isSuperToken: false,
    };
  },
  mounted() {
    this.isSuperToken =
      localStorage.getItem("superToken") ==
        "407404EAEC845F1B91A104B80FE86D89" ||
      localStorage.getItem("superToken") == "5FD271D8A0AA315DD218801C0C3A0DEA";
    document.title = "职业大全-" + this.positionName;
    if (
      this.$route.query.superToken == "407404EAEC845F1B91A104B80FE86D89" ||
      this.$route.query.superToken == "5FD271D8A0AA315DD218801C0C3A0DEA"
    ) {
      this.specialHidden = false;
    }
    // this.fetchData()
    //监听页面滚动锚点定位
    document
      .getElementById("content")
      .addEventListener("scroll", this.handleScroll);
    //不知道监听什么历史代码
    window.addEventListener("click", this.listenerChangeFlag);
  },
  beforeDestroy() {
    document
      .getElementById("content")
      .removeEventListener("scroll", this.handleScroll);
    window.removeEventListener("click", this.listenerChangeFlag);
  },
  created() {
    this.fetchData();
    this.getHistoryStat();
    //console.log("this.$route.query", this.$route.query);
    this.getFatherName(this.positionName);
  },
  watch: {
    info: {
      handler(newValue) {
        var noneEdit = newValue.some(function (item) {
          return item.currentEdit;
        });
        if (!noneEdit) {
          this.editAll = false;
          this.openAtLeastOneEdit = false;
        } else {
          this.openAtLeastOneEdit = true;
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    clickCollect() {
      if (this.collectStatus) {
        delPositionCollect({
          positionId: this.positionId,
        }).then((res) => {
          if (res.code == 200) {
            //console.log("取关成功");
            this.$message({
              type: "success",
              message: "已取消关注",
            });
          }
        });
      } else {
        addPositionCollect({
          positionId: this.positionId,
        }).then((res) => {
          if (res.code == 200) {
            //console.log("添加成功");
            this.$message({
              type: "success",
              message: "已添加关注",
            });
          }
        });
      }
      this.collectStatus = !this.collectStatus;
    },
    getFatherName(name) {
      getProfessionTreeByTitle({
        tagTitle: name,
      }).then((res) => {
        if (res.code == 200) {
          if (res.data[0]) {
            this.positionFatherName = `${res.data[0].topTitle} · ${res.data[0].parentTitle}`;
          } else {
            this.positionFatherName = "暂无分类";
          }
        }
      });
    },
    listenerChangeFlag(e) {
      let nowClassName = e.target.className;
      if (nowClassName != "search" && nowClassName != "el-input__inner") {
        this.$refs.searchBox.clickInputOutside();
      }
    },
    handleLogoClick() {
      this.$router.push({
        path: "/position",
        query: {
          superToken: this.$route.query.superToken || "",
          SecretKey: this.$route.query.SecretKey || "",
          customerName: this.$route.query.customerName || "",
        },
      });
    },
    handleScroll() {
      if (this.isClickScroll) return;
      var top =
        document.getElementById("content").scrollTop || document.body.scrollTop;
      this.scrollToTopBtn = top > 400;

      var curId = "";
      var items = document.querySelectorAll(".demo-autocomplete");
      items.forEach((item, index) => {
        if (item.offsetTop - 80 < top) {
          this.selectedNav = index;
          this.$nextTick(() => {
            const selectedHeight =
              document.querySelector(".selectedNav").offsetTop;
            document.querySelector(".navDot").style.marginTop =
              selectedHeight + "px";
          });
        }
      });
    },
    handleBackBtnClick() {
      this.$router.push({
        path: "/position",
        query: {
          superToken: this.$route.query.superToken || "",
        },
      });
    },
    getInputData(inputData) {
      this.inputData = inputData;
      //console.log("搜索");
      this.getSearchList();
    },
    getHistoryStat() {
      historyStat({
        ylPositionId: this.positionId,
      }).then((res) => {
        this.editData = res.data;
      });
    },
    handleNavClick(item, index) {
      this.isClickScroll = true;
      setTimeout(() => {
        this.isClickScroll = false;
      }, 500);
      this.selectedNav = item.columnIndex;
      this.$nextTick(() => {
        const selectedHeight = document.querySelector(".selectedNav").offsetTop;
        document.querySelector(".navDot").style.marginTop =
          selectedHeight + "px";
      });
      var el = document.getElementById("scroll" + index);
      if (el) {
        el.scrollIntoView({
          behavior: "auto",
          block: "start",
          inline: "nearest",
        });
        setTimeout(() => {
          //console.log("开始监听");
          this.isClickScroll = false;
        }, 1200);
      }
    },
    handleOpen(val) {
      console.log(this.currentTab + "");
    },
    handleClose(val) {
      console.log(val);
    },
    handleSelect(val, values) {
      this.currentTab = val + "";
      this.aiCreateStatus = false;
      let textEl = document.querySelectorAll(".AIBtn");
      textEl.forEach((item) => {
        item.classList.remove("AILoading");
      });
      if (values[0]) {
        this.currentFatherTab = values[0];
      }
    },
    adminInit() {
      const userToken = VueCookies.get("vue_admin_template_token");
      // console.log(userToken)
      if (userToken === "admin-token") {
        this.isAdmin = true;
      }
    },
    judgeCollect() {
      judgeCollectStatus({ id: this.positionId }).then((res) => {
        if (res.code == 200) {
          this.collectStatus = res.data;
          //console.log("this.collectStatus", this.collectStatus);
        }
      });
    },
    fetchData() {
      this.adminInit();
      this.positionName = this.$route.query.name;
      this.positionId = this.$route.query.id;
      this.currentPositionName = this.$route.query.name;
      this.judgeCollect();

      getQuestionList({
        id: this.positionId,
      }).then((response) => {
        if (this.isSuperToken) {
          response.data = response.data.filter(
            (item) =>
              !(item.answer == null || item.answer.answerContent == null)
          );
        }
        let j = 0;
        for (let i = 0; i < response.data.length; i++) {
          var answer =
            response.data[i].answer != null ? response.data[i].answer : "";
          var answerContent =
            answer["answerContent"] != null
              ? answer["answerContent"].replace(/\n/g, "<br>")
              : "";
          this.info.splice(j, 1, {
            columnName: response.data[i].questionTitle,
            questionContent: response.data[i].questionContent,
            columnCode: response.data[i].id,
            columnIndex: j,
            content: answerContent,
            extendContent: [],
            allContent: answerContent,
            table: "positionQuestion",
            currentEdit: false,
            isUse: response.data[i].isUse,
          });
          j++;
        }
      });
    },
    aiCreate(questionContent, columnIndex, columnName) {
      if (this.aiCreateStatus) {
        this.$message({
          type: "warning",
          message:
            "已有AI正在生成中，等待生成内容结束或F5刷新页面再次点击AI生成!",
        });
        return;
      } else {
        this.aiCreateStatus = true;
        let textEl = document.querySelectorAll(".AIBtn"); // 获取要添加省略号的元素
        textEl.forEach((item) => {
          item.classList.add("AILoading"); // 添加类名，启动动画效果
        });
      }
      const name =
        this.$route.query.name != undefined ? this.$route.query.name : "";
      this.chatKey = questionContent.replace(/{}/g, name);

      this.currentButton = columnIndex;
      // this.info[columnIndex].content = "";

      this.messages.push({
        role: "user",
        content: this.chatKey,
      });
      // console.log('AI')
      const agentData = {
        userId: "",
        userName: "",
        messages: this.messages,
      };
      this.messages = [];
      this.sendMsg = JSON.stringify(agentData);
      this.$set(
        this.info[columnIndex].extendContent,
        this.info[columnIndex].extendContent.length,
        ""
      );
      this.$refs.child.send(this.sendMsg, this.initMessageBack, this.wsError);
      this.$message.success({
        message: "AI生成内容中...",
        offset: "400",
      });
      addLog({ logType: "10" });
      operateSave({
        ylPositionId: this.positionId,
        description: `AI生成-${columnName}`,
      });
    },
    initMessageBack(res) {
      this.loading = true;
      if (res === "err") {
        this.loading = false;
        return;
        // (this.showError = true);
      }
      const msg = res.choices && res.choices[0];
      if (!this.currentRole) {
        this.currentRole = msg.delta.role;
      }
      if (msg.delta.role === "assistant") {
        return;
      }
      if (msg.finish_reason === "stop" || msg.finish_reason === "done") {
        this.loading = false;
        // this.currentMsg = "";
        this.currentRole = "";
        this.aiCreateStatus = false;
        let textEl = document.querySelectorAll(".AIBtn");
        textEl.forEach((item) => {
          item.classList.remove("AILoading");
        });
        // this.info[this.currentButton].extendContent;
        //  += "<br>";
        return;
      }
      if (msg.delta.content) {
        var tempStr = msg.delta.content;
        if (tempStr) {
          tempStr = tempStr.replace(/(\r\n|\n|\r)+/g, "<br>");
        }
        // this.info[this.currentButton].extendContent += tempStr;
        let len = this.info[this.currentButton].extendContent.length - 1;
        this.$set(
          this.info[this.currentButton].extendContent,
          len,
          (this.info[this.currentButton].extendContent[len] += tempStr)
        );
        // this.info[this.currentButton].allContent += tempStr;
      }
    },
    wsError() {
      if (this.isStoped) {
        this.isContinue = false;
      } else {
        this.isContinue = true;
      }
      //console.log("连接失败，请重试");
    },
    copy(columnIndex) {
      const input = document.createElement("input");
      var copyContent = this.info[columnIndex].allContent.replace(
        /<br[^>]+>/g,
        "\n"
      );
      console.log(copyContent);
      input.value = copyContent.replace(/<[^>]+>/g, "\n");
      input.id = "creatDom";
      document.body.appendChild(input);
      input.select();
      document.execCommand("copy");
      document.body.removeChild(input);
      this.$message.success({
        message: "复制成功！",
        offset: "400",
      });
    },
    //全部编辑
    changeEditStatus() {
      if (this.isAdmin) {
        if (this.editAll) {
          let editAllInfo = this.info.every((item) => {
            return item.allContent == item.content.replace(/<br>/g, "\n");
          });
          //console.log("editAllInfo", editAllInfo);
          if (editAllInfo) {
            this.editAll = !this.editAll;
            this.info.forEach((item) => {
              item.currentEdit = this.editAll;
            });
          } else {
            this.$confirm("此操作将不保存已修改内容, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(() => {
              this.editAll = !this.editAll;
              this.info.forEach((item) => {
                item.currentEdit = this.editAll;
                item.allContent = item.content;
              });
            });
          }
        } else {
          this.editAll = !this.editAll;
          this.info.forEach((item) => {
            item.allContent = item.currentEdit
              ? item.allContent
              : item.content.replace(/<br>/g, "\n");
            item.currentEdit = this.editAll;
          });
        }
      }
    },
    //单个保存
    save(columnCode, columnIndex, table) {
      if (
        this.info[columnIndex].allContent ==
        this.info[columnIndex].content.replace(/<br>/g, "\n")
      ) {
        this.$message({
          type: "success",
          message: "修改信息无变化!",
        });
        this.info[columnIndex].currentEdit = false;
      } else {
        this.$confirm("此操作将覆盖原有内容, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.positionId = this.$route.query.id;
            const params = {
              ylPositionId: this.positionId,
            };
            if (table == "positionExtend") {
              var aiContent = this.info[columnIndex].allContent;
              switch (columnCode) {
                case "def":
                  params.positionDefinition = aiContent;
                  break;
                case "book":
                  params.recommendBook = aiContent;
                  break;
                case "task":
                  params.workContent = aiContent;
                  break;
                case "tool":
                  params.recommendTool = aiContent;
                  break;
                case "skill":
                  params.recommendSkill = aiContent;
                  break;
                default:
                  this.$message({
                    type: "info",
                    message: "入参有误!",
                  });
                  break;
              }
              saveInfo(params).then((response) => {
                this.info[columnIndex].content =
                  this.info[columnIndex].allContent;
                // console.log(response)
              });
            }

            if (table == "positionQuestion") {
              params.questionId = columnCode;
              params.answerContent = this.info[columnIndex].allContent;
              saveAnswerInfo(params).then((response) => {
                // console.log(response)
                this.info[columnIndex].content = this.info[
                  columnIndex
                ].allContent.replace(/\n/g, "<br>");
              });
            }
            this.$message({
              type: "success",
              message: "修改成功!",
            });
            this.info[columnIndex].currentEdit = false;
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消修改",
            });
          });
      }
    },
    saveAll() {
      let params = [];
      this.info.forEach((item) => {
        if (item.allContent != item.content.replace(/<br>/g, "\n")) {
          params.push({
            ylPositionId: this.positionId,
            questionId: item.columnCode,
            answerContent: item.allContent,
          });
        }
      });
      //console.log("params", params);
      if (params.length > 0) {
        this.$confirm("此操作将覆盖原有内容, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.editAll = false;
            batchSaveAnswer(params)
              .then((res) => {
                if (res.code == 200) {
                  this.info.forEach((item) => {
                    item.content = item.allContent.replace(/\n/g, "<br>");
                    item.currentEdit = false;
                  });
                  this.$message({
                    message: "保存全部成功！",
                    type: "success",
                    duration: 5 * 1000,
                  });
                }
              })
              .catch(() => {
                this.$message({
                  type: "error",
                  message: "修改失败，请重试",
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消修改",
            });
          });
      } else {
        this.editAll = false;
        this.info.forEach((item) => {
          item.currentEdit = false;
        });
        this.$message({
          type: "success",
          message: "修改信息无变化!",
        });
      }
    },
    //单个编辑
    editCurrent(item, index) {
      if (item.currentEdit) {
        if (item.allContent == item.content.replace(/<br>/g, "\n")) {
          this.info[index].currentEdit = !item.currentEdit;
        } else {
          this.$confirm("此操作将不保存已修改内容, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.info[index].currentEdit = !item.currentEdit;
            this.info[index].allContent = item.content;
          });
        }
      } else {
        this.info[index].currentEdit = !item.currentEdit;
        this.info[index].allContent = item.content.replace(/<br>/g, "\n");
      }
    },
    replaceByOne(item, index) {
      let itemReplace = item.replace(/<br>/g, "\n");
      this.info[index].allContent = itemReplace;
    },
    deleteContent(index) {
      this.info[index].allContent = "";
    },
    scrollTopTopClick() {
      document.getElementById("content").scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
  },
};
</script>
<style scoped lang="scss">
@keyframes popupAnimation {
  0% {
    transform: translate(-50%, 100%);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

.all {
  position: relative;
  background: #f7f8fa;
  height: 100%;
}
#top {
  position: fixed;
  display: flex;
  align-items: center;
  height: 57px;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(7px);
  background-size: 100% 57px;
  z-index: 2;
  .title {
    display: flex;
    align-items: center;
    padding-left: 25px;
    color: #fff;
    font-size: 17px;
    line-height: 24px;
    letter-spacing: 2px;
    font-family: "title-home-font";
    span {
      cursor: pointer;
    }
    img {
      height: 24px;
      margin-right: 5px;
      width: auto;
      cursor: pointer;
    }
  }
}
.main {
  height: 100%;
  position: relative;
  border-radius: 20px;
  margin-top: 24px;
  background-color: white;
  margin-left: 24px;
  margin-right: 24px;
  // width: 100%;
  width: calc(100vw - 48px);
  // min-height: 95vh;
  display: flex;
  flex-direction: column;
  .topNavi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    padding: 0 16px;
    .topNaviItem {
      display: flex;
      align-items: center;
    }
    .topNaviItemRight {
      display: flex;
      align-items: center;
      padding-right: 65px;
    }
    .backBtn {
      width: 36px;
      height: 36px;
      margin-right: 16px;
      img {
        width: 36px;
        height: 36px;
      }
    }
    .naviPositionName {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #222222;
      line-height: 28px;
    }
    .fatherTitleName {
      margin-left: 10px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 20px;
    }
    .collect {
      cursor: pointer;
      padding: 4px 10px;
      border-radius: 110px;
      background: rgba(244, 93, 93, 1);
      display: flex;
      color: #fff;
      align-items: center;
      font-size: 14px;
      margin-left: 16px;
      img {
        width: 14px;
        height: 14px;
      }
      p {
        margin: 0;
        margin-left: 5px;
        margin-top: 2px;
      }
    }
    .collected {
      background: rgba(204, 204, 204, 1);
    }
  }
  .mainContent {
    display: flex;
    flex: 1;
    width: 100%;
  }
}
#app-container {
  width: 100%;
  display: flex;
  background: url("../../assets/home/back.png") no-repeat;
  flex-direction: column;
  background-size: 100.1% auto;
  align-items: center;
}

::v-deep .el-menu {
  width: 175px;
  border-right: 0px;
  background: #f5f5f5;
}
::v-deep .el-menu-item {
  padding-left: 60px !important;
  padding: 0;
  min-width: 145px;
  height: 41px;
  line-height: 41px;
  color: #999999;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
}
::v-deep .el-submenu__title {
  height: 41px;
  font-size: 16px;
  line-height: 41px;
  padding-left: 16px !important;
  color: #999999;
  background: #fff;
  // overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
::v-deep .el-menu-item.is-active {
  color: #0b6eff;
}
::v-deep .el-submenu.is-active > .el-submenu__title {
  color: #fff;
  padding-left: 9px !important;
  margin-left: 12px;
  background: #0b6eff;
  border-radius: 8px;
  &::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 41px;
    background: #0b6eff;
    position: absolute;
    left: -12px;
    border-radius: 8px;
  }
  .el-icon-arrow-down:before {
    color: #fff;
  }
}
.listInner {
  height: 100%;
  width: 100%;
}
.menu {
  width: 175px;
  height: 100%;
  // border-right: 1px solid #e8e8e8;
}

#list {
  font-size: 15px;
  padding-top: 20px;
  position: relative;
  flex: 1;
  height: 100%;
  padding-right: 160px;
}
.demo-autocomplete {
  padding-bottom: 46px;
}
.positionDesc {
  padding-left: 20px;
  width: 100vw;
  border-top: 1px solid #efefef;
  // border-radius: 10px;
  width: 100%;
  height: 100%;
  position: relative;
  .scrollToTop {
    position: fixed;
    width: 48px;
    height: 48px;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    bottom: 40px;
    right: 210px;
    z-index: 99;
    background: #fff;
    font-size: 10px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: bold;
    color: #747680;
    line-height: 14px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    animation: popupAnimation 0.5s forwards;
    cursor: pointer;
    .top-icon {
      width: 16px;
      height: 16px;
      background-image: url("../../assets/detail/icon_top_gray.png");
    }

    .small {
      transform: scale(0.9);
      font-weight: 900;
    }
  }
  .scrollToTop:hover {
    background-color: #076afe;
    color: #fff;
    .top-icon {
      width: 16px;
      height: 16px;
      background-image: url("../../assets/detail/icon_top_white.png");
    }
  }
}

.positionName {
  display: flex;
  width: 100%;
  align-items: center;
  color: #333333;
  // background-color: #edf6ff;
  height: 1px;
  font-size: 18px;
  font-weight: bold;
  margin-left: -20px;
  z-index: 99;
}
.switchBtn {
  float: right;
  right: 90px;
  top: 20px;
  // width: 80px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid #dbe0e7;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #888888;
  line-height: 20px;
  background: #fff;
}
.disabledSave {
  margin-left: 15px;
  margin-right: 20px;
  width: 80px;
}
.controlLine {
  display: flex;
  justify-content: flex-start;
  // align-items: center;
  margin-bottom: 12px;
  .tinyTitle {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
    // margin-right: 24px;
  }
  .line {
    flex: 1;
    height: 16px;
    margin-left: 14px;
    border-bottom: 1px solid #efefef;
  }
  .saveBtns {
    display: flex;
    height: 32px;
    align-items: center;
    justify-content: center;
    padding-right: 10px;
    .contentItemEditAndAIBtn {
      line-height: 32px;
      margin: 0 10px 0 15px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #888888;
      display: flex;
      align-items: center;
      cursor: pointer;
      img {
        width: 22px;
        height: 22px;
      }
    }
  }
  .AILoading {
    position: relative;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 0px;
      height: 100%;
      background-color: transparent;
      animation-name: ellipsis;
      animation-duration: 1.5s;
      animation-iteration-count: infinite;
    }
  }
}
@keyframes ellipsis {
  from {
    width: 20px; /* 省略号宽度为0，不可见 */
    background-color: #fff; /* 省略号颜色透明 */
  }
  to {
    width: 0px; /* 省略号宽度为30px，可见 */
    background-color: #fff; /* 省略号颜色为黑色 */
  }
}
.saveAllBtn {
  width: 57px;
  height: 26px;
  border: none;
  background: #4880ff;
  color: #ffffff;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  border-radius: 4px;
  margin-left: 15px;
  margin-right: 20px;
}
.aiContent {
  flex: 1;
  height: 100%;
  font-size: 15px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #555555;
  line-height: 27px;
  // max-width: 90%;
  word-break: break-all;
  white-space: normal;
  padding-right: 36px;
}
// .aiExtendContent {
//   line-height: 28px;
//   color: #1677db;
//   margin-top: 28px;
//   word-break: break-all;
//   white-space: normal;
//   width: 50%;
// }
.editBox {
  width: 100%;
  display: flex;
  padding-right: 20px;
  .editBoxLeft {
    flex: 1;
    position: relative;
    border: 1px solid #709cff;
    .deleteContent {
      position: absolute;
      cursor: pointer;
      right: 12px;
      top: 15px;
    }
  }
  .editBoxRight {
    flex: 1;
    padding: 12px 16px 0px 16px;
    background: #f5f9ff;
    font-size: 15px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4b6aaf;
    line-height: 27px;
    position: relative;
    .extendsItem {
      position: relative;
      padding-bottom: 35px;

      .replaceByOne {
        position: absolute;
        bottom: 13px;
        right: 14px;
        cursor: pointer;
        color: #4880ff;
      }
    }
  }
  .noEdit {
    padding: 0;
    background: #fff;
  }
}
::v-deep .el-tabs__content {
  border-left: 1px solid #e8e8e8;
  padding-left: 36px;
}
::v-deep.el-tabs--left .el-tabs__header.is-left {
  margin-right: 0;
}
::v-deep.el-tabs--left .el-tabs__item.is-left {
  text-align: left;
}
::v-deep .el-submenu__title > span {
  padding-left: 20px;
}
::v-deep .el-tabs__item {
  height: 48px;
}
.search-box {
  margin-top: 8px !important;
  width: auto !important;
}

::v-deep .el-textarea__inner {
  padding: 12px 40px 17px 12px;
  font-size: 15px;
  line-height: 27px;
  // min-height:200px !important;
}
textarea {
  resize: none;
}
.titleFlag {
  width: 5px;
  height: 15px;
  border-radius: 32px;
  background-color: #409eff;
  margin-right: 12px;
  color: red;
}
.scroller {
  width: 152px;
  height: calc(100vh - 150px);
  right: 30px;
  top: 143px;
  color: #bfbfbf;
  font-size: 14px;
  line-height: 20px;
  position: fixed;
  border-left: 1px solid #eaedf7;
  .wrap {
    padding-top: 18px;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
  }
  .rightNavi {
    position: relative;
    display: flex;
    // height: calc(100vh - 470px);
    // flex: 1;
    overflow-y: auto;
    .navDot {
      width: 0;
      height: 0;
      margin-top: 10px;
      border-left: 8px solid #0b6eff;
      border-bottom: 8px solid transparent;
      border-top: 8px solid transparent;
      transition: margin-top 0.1s ease-in-out;
    }
    .selectedNav {
      color: #0b6eff;
    }
    .editedNav {
      color: #44d184;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        left: -15px;
        top: 7px;
        width: 4px;
        height: 5px;
        background: #44d184;
        border-radius: 50%;
      }
    }
  }
  .editStatistics {
    flex-shrink: 0;
    // position: absolute;
    // bottom: 0;
    width: 100%;
    // height: 298px;
    margin: 8px 0px 0px 0;
    background-image: linear-gradient(160deg, #e0ebfd 0%, #fff 20%, #fff 100%);
    border: #f5f5f5 1px solid;
    .grey {
      color: #a2a5b3;
      font-size: 13px;
      display: flex;
      align-items: center;
    }
    .editContentText {
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #555555;
      line-height: 22px;
    }
    .huizhang {
      width: 16px;
      height: 16px;
      margin-left: 3px;
    }
    .historyTitle {
      width: 97px;
      height: 20px;
      font-size: 14px;
      font-family: PingFang-SC-Heavy, PingFang-SC;
      font-weight: 800;
      color: #076afe;
      line-height: 20px;
      margin-left: 18px;
      margin-top: 12px;
    }
    .aditContent {
      margin: 6px 0 10px 18px;
    }
  }
}
.scrollerFlex {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin: 8px 12px;
  border: 10px;
  .title {
    display: flex;
    align-items: center;
    color: #bfbfbf;
  }
  .online {
    color: #555555;
  }
  .menuEditState {
    width: 20px;
    height: 20px;
  }
}

#content {
  color: #222222;
  font-size: 13px;
  font-family: PingFangSC-Regular;
  display: flex;
  flex: 1;
  overflow-y: auto;
  height: calc(100vh - 150px);
  overflow-x: scroll;
  border-left: 1px solid #eaedf7;
  &::-webkit-scrollbar {
    width: 4px;
    background-color: #fff;
    border-radius: 4px;

    height: 4px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #d8d8d8;
    border-radius: 4px;
  }
}
.menuIcon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  margin-bottom: 3px;
  line-height: 16px;
}

.scrollerFlex:hover {
  color: #409eff;
  cursor: pointer;
}

::-webkit-scrollbar {
  width: 4px;
  background-color: #fff;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background-color: #d8d8d8;
  border-radius: 4px;
}
::v-deep .el-textarea__inner::-webkit-scrollbar {
  width: 5px;
  background-color: #fff;
  border-radius: 4px;
}
::v-deep .el-textarea__inner::-webkit-scrollbar-thumb {
  background-color: #d8d8d8;
  border-radius: 4px;
}
::v-deep .el-textarea {
  height: 100%;
  textarea {
    //   // height:100% !important;
    border: none;
  }
}
// ::v-deep .el-textarea {
//   max-width: 900px;
// }
::v-deep .el-table {
  max-width: 73%;
}
::v-deep .el-submenu__title > span {
  padding-left: 0;
}
button:focus {
  outline: none;
}
button:hover {
  cursor: pointer;
}
::v-deep .el-date-editor .el-range-input {
  color: #999999;
  background-color: #fafcfe;
}
::v-deep .el-range-editor--small .el-range__icon {
  display: none;
}
</style>
